<template>
  <div class="container">
    <salaryTopTitle @gobackTriser="goBack"></salaryTopTitle>
    <!--制作方式-->
    <div class="mainCon">
      <createSalaryStep :activeIndex="activeIndex"></createSalaryStep>
      <div class="createWay" id="createWay">
        <p>请选择制作工资表的方式</p>
        <ul>
          <li>
            <!-- <div @click = "toCreateSalary" v-show="isShowAdd"> -->
            <div @click="toCreateSalary">
              <div class="title">
                <img src="../../../static/img/salary/create.png" alt="" />
                <!-- <span class="way" v-show="makeSalaryBtn">在线制作工资表</span> -->
                <span class="way">在线制作工资表</span>
              </div>

              <div class="explainBox">
                <span
                  >通过在线筛选需要发放工资的员工，选择工资月份，创建工资表</span
                >
              </div>
            </div>
          </li>

          <li>
            <div @click="toImportSalary">
              <div class="title">
                <img src="../../../static/img/salary/import.png" alt="" />
                <!-- <span  class="way" v-show="importBtn">导入工资表</span> -->
                <span class="way">导入工资表</span>
              </div>

              <div class="explainBox">
                <span
                  >通过指定模板，导入线下已制作的工资表，可为务工人员制作工资表</span
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import createSalaryStep from '@/components/publicCom/createSalaryStepJz'
import salaryTopTitle from '@/components/publicCom/salaryTopTitle'

export default {
  name: 'createSalaryWay',
  components: {
    createSalaryStep,
    salaryTopTitle,
  },
  data() {
    return {
      activeIndex: 0,
      // importBtn:false,//导入工资表
      // makeSalaryBtn:false,//制作工资表
      projectName: '',
      projectId: '',
      // isShowAdd:""
    }
  },
  created() {
    //首页跳过来tab默认选中工资一级列表
    if (this.$route.query.path == 'createConstructSalaryWay') {
      this.$store.commit(
        'set_active_index',
        '/home/salaryDf/companySalaryBatchList'
      )
      this.$store.state.activeMenu = '/home/salaryDf/companySalaryBatchList'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    //按钮显示
    // this.importBtn = this.$store.state.buttonLimitsArr.indexOf('ncSalary:add') > -1 ;
    // this.makeSalaryBtn = this.$store.state.buttonLimitsArr.indexOf('ncSalary:add') > -1 ;

    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    // this.isShowAdd = this.$store.state.buttonLimitsArr.indexOf('csSalaryList:add') > -1 ;
  },
  methods: {
    toCreateSalary() {
      this.$router.push({
        path: '/home/constructSalary/createConstructSalary',
        name: 'createConstructSalary',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      // this.$router.push("/home/constructSalary/createConstructSalary");
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toImportSalary() {
      this.$router.push({
        path: '/home/constructSalary/importConstructSalary',
        name: 'importConstructSalary',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      // this.$router.push("/home/constructSalary/importConstructSalary");
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      this.$router.push({
        path: '/home/salaryDf/companySalaryBatchList',
        name: 'companySalaryBatchList',
        query: {
          projectId: this.$route.query.projectId,
        },
      })

      // this.$router.push("/home/constructSalary/importConstructSalary");
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salaryDf/companySalaryBatchList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  height: calc(100% - 67px);
}

// 生成方式
.createWay {
  margin-top: 60px;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 70px;
  p {
    font-size: 28px;
    color: #333;
    font-family: '宋体';
    margin-bottom: 60px;
  }
  ul li {
    display: inline-block;
    width: 240px;
    height: 325px;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;

    position: relative;
    border: 1px solid #fff \0;
    // 动画
    border-radius: 5px;
    transition: ease-in 0.3s;
    // background: linear-gradient(0, #009588 1px, #009588 1px) no-repeat,
    // linear-gradient(-90deg, #009588 1px, #009588 1px) no-repeat,
    // linear-gradient(-180deg, #009588 1px, #009588 1px) no-repeat,
    // linear-gradient(-270deg, #009588 1px, #009588 1px) no-repeat;
    background-size: 0 1px, 1px 0, 0 1px, 1px 0;
    background-position: left top, right top, right bottom, left bottom;
    &:last-child {
      margin-left: 8%;
    }
    img {
      width: 120px;
      height: 120px;
    }
    .way {
      font-size: 18px;
      display: block;
      color: #333;
      margin: 16px 0;
    }
    .title {
      padding-top: 35px;
    }
    .explainBox {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 105px;
      padding: 0 15px;
      span {
        font-size: 14px;
        color: #666;
      }
    }
  }
  li:hover {
    border: 1px solid #009588 \0;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    .way {
      color: #009588;
    }
  }
}
</style>
